<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <script type="text/javascript" src="dist/js/main.js" ></script>
        
        <link rel="stylesheet" type="text/css" href="dist/css/main.css" />
    </head>
    <body>
        <div class="container">
            <div class="board">
                <div class="blackbar">

                </div>
                <div class="keyboard">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li><span>!</span><span>1</span></li>
                        <li><span>@</span><span>2</span></li>
                        <li><span>#</span><span>3</span></li>
                        <li><span>$</span><span>4</span></li>
                        <li><span>%</span><span>5</span></li>
                        <li><span>^</span><span>6</span></li>
                        <li><span>&</span><span>7</span></li>
                        <li><span>*</span><span>8</span></li>
                        <li><span>(</span><span>9</span></li>
                        <li><span>)</span><span>0</span></li>
                        <li><span>_</span><span>-</span></li>
                        <li><span>+</span><span>=</span></li>
                        <li></li>
                        <li></li>
                        <li>Q</li>
                        <li>W</li>
                        <li>E</li>
                        <li>R</li>
                        <li>T</li>
                        <li>Y</li>
                        <li>U</li>
                        <li>I</li>
                        <li>O</li>
                        <li>P</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li>A</li>
                        <li>S</li>
                        <li>D</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li>Z</li>
                        <li>X</li>
                        <li>C</li>
                        <li>V</li>
                        <li>B</li>
                        <li>N</li>
                        <li>M</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li>By Pure CSS.To Be continued.</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="touch">

                </div>
            </div>
        </div>
    </body>
</html>
